<template>
  <div class="error">
    <div class="error_cen">
      <h1>Page not found: </h1>
      <h4 class="error_cen_p">{{ notice }}</h4>
      <br/>
      <center>
        <a class="el-button el-button--primary" href="javascript:window.history.back();">&nbsp;&nbsp;返回&nbsp;&nbsp;</a>
        <el-button type="success" @click="jumpFn('/')">&nbsp;&nbsp;跳转首页&nbsp;&nbsp;</el-button>
      </center>
    </div>
  </div>
</template>

<script setup>
const notice = ref(useRoute().fullPath || 'The page you are looking for does not exist!');
// TDK
const prevHost = useRequestHeaders()["x-forwarded-proto"];
const host = useRequestHeaders()["host"];
const fullPath = useRoute()["fullPath"];
useSeoMeta({
  title: '您要找的页面不存在',
  keywords: '您要找的页面不存在',
  description: '您要找的页面不存在',
  ogTitle: '您要找的页面不存在',
  ogDescription: '您要找的页面不存在',
  ogType: "article",
  ogUrl: `${prevHost}://${host}${fullPath}`,
})
// 跳转
function jumpFn(path) {
  useRouter().replace(path)
  window.location.href = path;
}
</script>

<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.error {
  background-color: rgba(0, 116, 252, .1);
  height: 100vh;
  position: relative;

  &_cen {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #0074FC;

    &_p {
      margin-top: 20px;
    }
  }
}
</style>